<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全选和反选</title>
    <style>
      input[type="checkbox"] {
        width: 20px;
        height: 20px;
        background-color: #fff;
        -webkit-appearance: none;
        border: 1px solid #c9c9c9;
        border-radius: 2px;
        outline: none;
      }

      input[type="checkbox"]:checked {
        background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
          no-repeat center;
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 一级复选框 -->
      <input type="checkbox" name="" id="" v-model="allcheck" />全选
      <div>
        <ul v-for="(shop, index) in goodslist">
          <li>
            <!-- 二级复选框 -->
            <p>
              <input
                type="checkbox"
                name=""
                id=""
                v-model="shop.ischeck"
                @click="chang(index)"
              />店铺:{{ shop.title }}
            </p>
            <ul>
              <!-- 三级复选框 -->
              <li v-for="good in shop.goods">
                <input
                  type="checkbox"
                  name=""
                  id=""
                  v-model="good.ischecked"
                />{{ good.title }}
              </li>
              <!-- <li><input type="checkbox" name="" id="" />红茶</li> -->
            </ul>
          </li>
        </ul>
        <!-- <ul>
          <li>
            <p><input type="checkbox" name="" id="" />店铺:柳螺香</p>
            <ul>
              <li><input type="checkbox" name="" id="" />绿茶</li>
              <li><input type="checkbox" name="" id="" />红茶</li>
            </ul>
          </li>
        </ul> -->
      </div>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        goodslist: [
          {
            id: 1,
            title: "茶叶阁",
            ischeck: false,
            goods: [
              {
                gid: 1,
                title: "绿城",
                ischecked: false,
              },
              {
                gid: 2,
                title: "红茶",
                ischecked: false,
              },
              {
                gid: 3,
                title: "保温瓶里跑枸杞",
                ischecked: false,
              },
            ],
          },
          {
            id: 2,
            title: "柳螺香",
            ischeck: false,
            goods: [
              {
                gid: 1,
                title: "螺蛳粉",
                ischecked: false,
              },
              {
                gid: 2,
                title: "桂林米粉",
                ischecked: false,
              },
            ],
          },
        ],
      },

      //方法
      methods: {
        //二级控制三级复选框
        chang(index) {
          console.log(index);
          console.log(this.goodslist[index]);
          this.goodslist[index].goods.forEach((good) => {
            good.ischecked = !this.goodslist[index].ischeck;
          });
        },
      },

      //计算属性
      computed: {
        allcheck: {
          //三级复选框控制一级复选框
          get() {
            let arr = []; //存每个店铺是否商品都已经全选中
            this.goodslist.forEach((shop) => {
              let res = shop.goods.every((good) => good.ischecked == true);
              arr.push(res);
            });
            return arr.every((item) => item == true);
          },
          //一级控制三级复选框
          set(val) {
            console.log(val);
            this.goodslist.forEach((shop) => {
              shop.goods.forEach((good) => {
                good.ischecked = val;
              });
            });
          },
        },
      },

      //监听器
      watch: {
        //三级复选框控制二级复选框
        goodslist: {
          deep: true, //深度监听
          handler(goodslist) {
            goodslist.forEach((shop) => {
              shop.ischeck = shop.goods.every((good) => good.ischecked == true);
            });
          },
        },
      },
    });
  </script>
</html>
